import { useEffect, useState } from 'react'
import WOW from 'wow.js'
import '../index.scss'
import dayjs from 'dayjs'
// 定义组件的 Props 类型
interface TopProps {
  title?: string
}

const Top: React.FC<TopProps> = ({ title = '' }) => {
  const [date, setDate] = useState(dayjs().format('YYYY-MM-DD'))
  const [time, setTime] = useState(dayjs().format('HH:mm:ss'))

  useEffect(() => {
    // 初始化 WOW.js
    const wow = new WOW({
      boxClass: 'wow',
      animateClass: 'animated',
      offset: 0,
      mobile: true,
      live: true,
      callback: (box: HTMLElement) => {
        // 每次动画开始时的回调
      },
      scrollContainer: null,
      resetAnimation: true
    })
    wow.init()

    // 每秒更新时间
    const intervalId = setInterval(() => {
      setDate(dayjs().format('YYYY-MM-DD'))
      setTime(dayjs().format('HH:mm:ss'))
    }, 1000)

    // 组件卸载时清除定时器
    return () => {
      clearInterval(intervalId)
    }
  }, [])

  return (
    <div className="header wow animate__animated animate__fadeInDown" id="header">
      <div className="headerLeft">
        <span>欢迎进入智能消防系统</span>
      </div>
      <div className="headerTitle">
        <p>{title}</p>
      </div>
      <div className="headerRight">
        <div className="info1">
          {date} {time}
        </div>
      </div>
    </div>
  )
}

export default Top
